import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Badge, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { formatUrl } from '@/utils/format';

const createColumns = (
  d: API.OrdersDetailResult
): ColumnsType<API.OrdersDetailStruct> => {
  return [
    {
      title: '商品',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (_, data) => {
        return (
          <Link
            className={'flex justify-center flex-1 cursor-pointer'}
            to={`/goods_detail/` + data.goods_id}
          >
            <img
              className={'w-12 h-18'}
              src={formatUrl(data.goods?.cover!)}
              alt=""
            />
            <div className={'text-left'}>
              <div className={'px-4 pb-2 pt-3 space-y-1.5'}>
                <div className={'text truncate'}>{data.goods?.title}</div>
                <div className={'truncate-2'}>{data.goods?.description}</div>
              </div>
            </div>
          </Link>
        );
      },
    },
    {
      title: '单价',
      dataIndex: 'price',
      key: 'price',
      align: 'center',

      render: (_, data) => {
        return (
          <div className={'space-y-1'}>
            <div>
              <i className={'line-through text-gray-600'}>
                <em className={'text-xs px-0.5'}>￥</em>
                {data.goods?.discount! < 1 ? data.goods?.price : null}
              </i>
            </div>
            <div>
              <strong className={'text-blue-600 text-lg'}>
                <em className={'text-xs px-0.5'}>￥</em>
                {data.goods?.price! * data.goods?.discount!}
              </strong>
            </div>
          </div>
        );
      },
    },
    {
      title: '数量',
      dataIndex: 'num',
      key: 'num',
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      key: 'status',
      render: () => {
        return (
          <Tag color={'green'}>
            <span className={"text-sm"}>
              {['已下单', '已付款', '已发货', '已收货', '已取消'][d.status - 1]}
            </span>
          </Tag>
        );
      },
    },
  ];
};

const OrdersTable: FC<PropsWithChildren<{ data: API.OrdersDetailResult }>> = ({
  data,
}) => {
  const columns = createColumns(data);
  return (
    <Table
      columns={columns}
      pagination={false}
      dataSource={data?.orders_detail}
      rowKey={'id'}
      footer={(data) => (
        <div className={'text-right p-2'}>
          <Badge status={'error'} />
          共计
          <span className={'px-2 text-2xl text-red-500  font-bold '}>
            <em className={'text-base'}>￥</em>
            {data
              .map((value) => value.num * value.price)
              .reduce((pre, next) => {
                return pre + next;
              }, 0)}
          </span>
        </div>
      )}
    />
  );
};

export default memo(OrdersTable);
